<template>
  <div class="container">
    <el-form :model="basicForm" v-loading="loading" label-width="150px">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="商户质保卡订单金额比例：" label-width="250px" prop="quality_assurance_card_rate">
            <el-input v-model.trim="basicForm.quality_assurance_card_rate" placeholder="商户质保卡订单金额比例"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="用户质保卡订单金额比例：" label-width="250px" prop="user_guarantee_card_percent">
            <el-input v-model.trim="basicForm.user_guarantee_card_percent" placeholder="用户质保卡订单金额比例"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="碎屏进水保服务订单金额比例：" label-width="250px" prop="screen_breakage_risk_percent">
            <el-input v-model.trim="basicForm.screen_breakage_risk_percent" placeholder="碎屏进水保服务订单金额比例"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="商家保证金费用：" label-width="250px" prop="store_deposit_money">
            <el-input v-model.trim="basicForm.store_deposit_money" placeholder="商家保证金费用"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="商家入驻费用：" label-width="250px" prop="store_settled_money">
            <el-input v-model.trim="basicForm.store_settled_money" placeholder="商家入驻费用"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="是否开启E签宝审核限制：" label-width="250px" prop="esign_contract_on">
            <el-select v-model.trim="basicForm.esign_contract_on" placeholder="是否开启E签宝审核限制" clearable class="">
              <el-option v-for="item in whetherStatue" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="蚂蚁链会员扣款期数" label-width="250px" prop="SCREEN_BREAKAGE_RISK_STAGE_NUMBER">
            <el-input v-model.trim="basicForm.SCREEN_BREAKAGE_RISK_STAGE_NUMBER" placeholder="蚂蚁链会员扣款期数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="抖音续租商品id" label-width="250px" prop="renew_dy_product_id">
            <el-input v-model.trim="basicForm.renew_dy_product_id" placeholder="抖音续租商品id"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer-center">
      <el-button type="primary" :disabled="disabledbtn" @click="handlePutConfigBasicInfo">确 定 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDictData } from "@/hooks/network/useDictData";
import { useState } from "@/hooks/useState";
import type { IDictData } from "@/types/dict";
import type { IBasicInfo } from "@/types/system/config";
import { getConfigBasicInfo, putConfigBasicInfo } from "@/utils/api/admin/system/config.ts";
const { disabledbtn, loading, toggleState } = useState();
const whetherStatue = ref<Array<IDictData>>([]);

const basicForm = reactive({
  quality_assurance_card_rate: "",
  screen_breakage_risk_percent: "",
  user_guarantee_card_percent: "",
  store_deposit_money: "",
  store_settled_money: "",
  SCREEN_BREAKAGE_RISK_STAGE_NUMBER: "",
  renew_dy_product_id: "",
  esign_contract_on: ""
});

let { getDictData } = useDictData();
getDictData("WHETHER", whetherStatue);
/* 获取基本配置 */
function handleGetConfigBasicInfo() {
  toggleState(true);
  getConfigBasicInfo<IBasicInfo>()
    .then(res => {
      basicForm.quality_assurance_card_rate = res.result.quality_assurance_card_rate;
      basicForm.screen_breakage_risk_percent = res.result.screen_breakage_risk_percent;
      basicForm.user_guarantee_card_percent = res.result.user_guarantee_card_percent;
      basicForm.store_deposit_money = res.result.store_deposit_money;
      basicForm.store_settled_money = res.result.store_settled_money;
      basicForm.SCREEN_BREAKAGE_RISK_STAGE_NUMBER = res.result.SCREEN_BREAKAGE_RISK_STAGE_NUMBER;
      basicForm.esign_contract_on = res.result.esign_contract_on;
      basicForm.renew_dy_product_id = res.result.renew_dy_product_id;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 修改基本配置 */
function handlePutConfigBasicInfo() {
  toggleState(true);
  putConfigBasicInfo(basicForm)
    .then(() => {
      ElMessage.success("修改成功");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

handleGetConfigBasicInfo();
</script>

<style lang="scss" scoped>
/* Add your styles here */
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}
</style>
